import React from 'react';
import {CheckboxGroupInput,ReferenceArrayInput,ArrayField,SingleFieldList,ChipField, EmailField, List, Edit, Create, Datagrid, ReferenceField, TextField, EditButton, DeleteButton,DisabledInput, LongTextInput, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin';

export const SysRoleList = (props) => (
    <List title="All Roles" 
        sort={{ field: 'roleName', order: 'DESC' }}
        {...props}>
        <Datagrid>
            <TextField source="roleName" />
            <TextField source="note" />
            <ArrayField source="permissions">
                <SingleFieldList>
                    <ChipField source="permissionName" />
                </SingleFieldList>
            </ArrayField>
            <EditButton />
            <DeleteButton />
        </Datagrid>
    </List>
);

export const SysRoleCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="roleName" />
            <TextInput source="note" />
        </SimpleForm>
    </Create>
);

const PostTitle = ({ record }) => {
    return <span>Update {record ? `"${record.roleName}"` : ''}</span>;
};

export const SysRoleEdit = (props) => (
    <Edit title={<PostTitle />}  {...props}>
        <SimpleForm>
        <TextInput source="roleName" />
        <TextInput source="note" />
        <ReferenceArrayInput label="Permissions" reference="SysPermission" source="permission_ids" sort={{ field: 'permissionName', order: 'ASC' }}>
            <CheckboxGroupInput optionText="permissionName" />
        </ReferenceArrayInput>
            
        </SimpleForm>
    </Edit>
);